{extend name="public/layout" /}
{block name="pluginsCss"}{/block}
{block name="style"}{/block}

{block name="body"}
    <div class="content-wrapper">
        <div class="sign-wrapper">
            <div class="login-wrapper">
                <div class="login-header">
                    <h4 class="login-title">账号登录</h4>
                </div>
                <form action="javascript:" id="form">
                    <div class="login-body">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-user"></i>
                        </span>
                        <input type="text" class="form-control" placeholder="请输入用户名" name="username">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-user"></i>
                        </span>
                        <input type="text" class="form-control" placeholder="请输入真实姓名" name="truename">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" class="form-control" placeholder="请输入密码" name="password">
                    </div>
                    <button class="btn btn-info form-control" id="register">注 册</button>
                    <div class="login-footer">
                        <a class="pull-right" href="{:url('pc/login/index')}">已有账号？立即登录</a>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
{/block}
{block name="pluginsJs"}{/block}
{block name="script"}
<script>
    $(function () {
        var a = "{:sha256('123456')}";
        console.log(a);
        // 屏幕缩放监听
        $(window).on('resize', function () {
            $('.sign-wrapper').css('min-height', ($(window).height() - 147) + 'px')
        }).trigger('resize');
        // 前端校验
        var validator = new Validator('form', [
            {
                name: 'username',
                display: '请输入用户名',
                rules: 'required',
            },
            {
                name: 'truename',
                display: '请输入真实姓名',
                rules: 'required',
            },
            {
                name: 'password',
                display: '请输入密码|密码为6~16位字符|密码为6~16位字符',
                rules: 'required|min_length(6)|max_length(16)',
            }
        ], function (obj, evt) {
            //如果errors具有内容则表示验证不通过
            if (obj.errors.length) {
                $.each(obj.errors, function (index, item) {
                    layer.tips(item.message, $('#form').find('[name="' + item.name + '"]'), {
                        tips: [2, '#00B4E9'],
                        tipsMore: true
                    });
                });
            }
        });

        //注册点击事件
        $('#register').click(function(){
           if(!validator.validate().errors.length) {
               var formData = $('#form').serialize();
               $.ajax({
                   url: "{:url('pc/register/save')}",
                   type: 'post',
                   data: formData,
               }).done(function (response) {
                   if (response.status) {
                       layer.msg(response.message, {icon: 1},function(){
                           window.location.href = "{:url('pc/login/index')}";
                       });
                   } else {
                       layer.msg(response.message);
                   }
               }).fail(function () {
                   console.error('立即报名请求失败！');
               });
           }
        });

    });
</script>
{/block}